<template>
  <div class="help-page">
    <!-- 左侧导航 -->
    <div class="help-sidebar">
      <div class="sidebar-header">Help</div>
      <ul class="sidebar-menu">
        <template v-for="item in helpList" :key="item.id">
          <li 
            :class="{ active: activeSection === item.id, 'first-level': true }"
            @click="scrollToSection(item.id)"
          >
            {{ item.name }}
          </li>
          <!-- 二级导航 -->
          <template v-for="child in item.children" :key="child.id">
            <li 
              :class="{ 
                active: activeSection === child.id,
                'sub-menu-item': true 
              }"
              @click="scrollToSection(child.id)"
            >
              {{ child.name }}
            </li>
            <!-- 三级导航 -->
            <li 
              v-for="grandChild in (child.children || [])"
              :key="grandChild.id"
              :class="{ 
                active: activeSection === grandChild.id,
                'third-level-menu-item': true 
              }"
              @click="scrollToSection(grandChild.id)"
            >
              {{ grandChild.name }}
            </li>
          </template>
        </template>
      </ul>
    </div>

    <!-- 主要内容区域 -->
    <div class="help-content">
      <!-- 1. INTRODUCTION -->
      <div class="help-section" id="introduction">
        <h2>1. INTRODUCTION</h2>
        <div class="section-content">
          <p>Emerging evidence suggests that ASM is particularly enriched in gene enhancer regions, and recent studies have demonstrated that ASM is increased in cancer samples compared with normal samples. Despite the increasing recognition of ASM as a potential biomarker in tumorigenesis, systematic resources for ASM mapping and functional annotation in cancer contexts remain limited. The growing number of studies exploring the relationships between SNVs and DNA methylation, along with the rapid expansion of data on distinct cis-regulatory elements, transcription factor ChIP-seq binding sites (TFBSs) and BS-seq data for human cancers, has prompted an urgent need to systematically identify ASM events and compile relevant cis-regulatory elements and TFs for a comprehensive exploration of ASM regulation across various cancer types.</p>
          <p>In this study, we developed CanASM, the first comprehensive database dedicated to identifying and annotating ASM in cancer. CanASM catalogs ASM sites identified in 226 bisulfite sequencing samples, spanning 31 cancer types and their corresponding matched normal tissue samples. Importantly, CanASM provides extensive regulatory annotations for ASMs, including associated genes, cis-regulatory elements and TFBS colocalizations, TF affinity changes, etc. The cis-regulatory elements included in CanASM include typical enhancers, super enhancers, ATAC regions, 3D chromatin interaction anchors and CpG islands. Users can query ASMs by single-nucleotide variants (SNVs), genomic regions or gene names. Additionally, CanASM enables functional analyses, including TF binding affinity alterations, target gene prediction through 3D interactions and cell marker variation predictions. Users can query and explore ASMs using various parameters, such as SNVs, chromosomal coordinates, and gene names. A schematic overview of CanASM is presented in Figure 1. By integrating large-scale BS-seq data with advanced regulatory annotations, CanASM offers a valuable resource for investigating SNV-driven epigenetic regulation in cancer. </p>          
          <img src="@/assets/help/Figure1.png" alt="CanASM overview" style="width: 100%; height: auto;">
          <p style="text-align: center"><span style="font-weight: bold">Figure 1.</span> The schematic overview of CanASM.</p>
        </div>
      </div>

      <!-- 2. DATA PROCESS -->
      <div class="help-section" id="data-process">
        <h2>2. DATA PROCESS</h2>
        <div class="section-content">
          <!-- 2.1 BS-seq data sources -->
          <div class="sub-section" id="bs-seq-data">
            <h3>2.1 BS-seq data sources</h3>
            <p>BS-Seq is a powerful technique for measuring methylation at cytosine-phosphate-guanine (CpG) sites on the genome-wide scale and can also be used to identify SNVs. To construct CanASM, we queried the NCBI GEO database for all available bisulfite sequencing datasets by March 2024, excluding low-quality and non-cancer datasets. Ultimately, 226 BS-Seq samples were incorporated into this study, covering 31 cancer types and their matched normal tissue samples across 30 distinct tissues. The primary sequencing strategy was whole-genome bisulfite sequencing (WGBS, 63%), with additional data from reduced representation bisulfite sequencing (RRBS) and Capture-BS, etc.</p>
          </div>

          <!-- 2.2 ASM identification pipeline -->
          <div class="sub-section" id="asm-identification">
            <h3>2.2 ASM identification pipeline</h3>
            <p>The analytical pipeline used to identify ASMs is diagrammed in Figure 2. The BS-seq reads of a sample were trimmed and filtered to remove sequencing adapters (default parameters if not specified) in GEO, low-quality bases (Phred score &lt; 30) and those shorter than 40 bp using TrimGalore (Version 0.6.10). The trimmed reads were aligned to the human genome (GRCh38) using Bismark (version 0.23.1). Sambamba was used to remove duplicates (markdup, -r). SNVs and CpG methylation were called using BS-SNPer and Bismark, respectively. BS-SNPer was developed to identify SNV sites from BS-Seq data with high sensitivity and specificity without relying on an existing SNP library. The minimum mutation read number was set to 5 to ensure accuracy when calling SNVs. Then, heterozygous SNVs (GT:0/1) with a BS-SNPer-reported quality value of 'pass' were selected for further analysis.</p>
            <p>To explore the methylation imbalance between the reference and alternative alleles, reads were first assigned to the respective alleles. C/T substitutions caused by bisulfite conversion impacts read assignment at variant sites, except for A/T and T/A mutations. For example, C/T mutations on the positive strand cannot be distinguished from C/T substitutions caused by bisulfite conversion; therefore, only reads supporting C or T alleles on the negative strand were used for ASM identification. We developed a read assignment strategy for each of the 12 mutation types, which is consistent with the SNV calling process. For an SNV‒CpG pair, overlapping reads were used for ASM identification through Fisher's exact test.</p>
            <img src="@/assets/help/Figure2.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 2.</span> Analytical pipeline for ASM identification.</p>
          </div>

          <!-- 2.3 Gene linkage to ASMs -->
          <div class="sub-section" id="gene-linkage">
            <h3>2.3 Gene linkage to ASMs</h3>
            <p></p>
            <ul>
              <li>To establish the associations between ASMs and their potential target genes, we implemented four distinct strategies as follows:</li>
              <li>Genomic annotation. We utilized ANNOVAR to annotate ASM index SNVs to the GRCh38 reference genes, with background genomic annotation files for reference genes downloaded from UCSC. This approach links ASMs to adjacent genes on the basis of their positions relative to the genes, including genes within 1 kb upstream/downstream regions, intergenic regions, exonic regions, intronic regions, and untranslated regions (UTRs).</li>
              <li>Expression quantitative trait locus (eQTL) annotation. We obtained eQTLs of 49 tissues from the TargetGene database to annotate ASM index SNVs.</li>
              <li>CpG targeting. We retrieved the cancer-specific target genes for ASM-associated CpG sites from our previous study, which employs RNA-seq expression profiles and DNA methylation array data to computationally predict target genes of CpG sites across 33 different cancer types.</li>
              <li>3D chromatin interaction-based prediction. We leveraged chromatin interaction anchors to determine the spatial relationship between ASM index SNVs and gene promoters (defined as 2 kb upstream and downstream of transcription start sites). If an SNV overlapped with the same interaction anchor as a gene promoter, it was considered to have a proximal regulatory relationship with the gene. In contrast, when the SNV and gene promoter were located in separate interaction anchors within a 3D interaction pair, they were classified as having a distal regulatory relationship.</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 3. DATABASE USAGE -->
      <div class="help-section" id="database-usage">
        <h2>3. DATABASE USAGE</h2>
        <div class="section-content">
          <!-- 3.1 Search -->
          <div class="sub-section" id="search">
            <h3>3.1 Search</h3>
            <p><span style="font-weight: bold">Home:</span>  The Home page provides a global search for keywords. Global search allows users to search 'SNVs', 'Genomic regions' or 'Gene' to retrieve indexed SNVs associated with ASMs.</p>
            <img src="@/assets/help/Figure3.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 3.</span>  Advanced search on the home page.</p>
            
            <p><span style="font-weight: bold">ASM List page:</span>  The results from the global search are initially displayed on this page, listing index SNVs for all related ASMs across all available samples in the database. You can refine the list by selecting a tissue of interest to refine the results then selecting an SNV to access its details page.</p>
            <img src="@/assets/help/Figure4.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 4.</span>List of index SNVs returned by the search.</p>
            
            <p><span style="font-weight: bold;">Details for an index SNV: </span>Upon selecting a specific SNV, users are directed to an integrated interface that systematically organizes multidimensional annotations for the index SNV, including ASM details, cis-regulatory elements, TF binding sites by ChIP-seq, associated genes and cancer GWAS traits.</p>
            <img src="@/assets/help/Figure5.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 5.</span>Details of an index SNV.</p>
          </div>

          <!-- 3.2 Online analysis tools -->
          <div class="sub-section" id="online-analysis">
            <h3>3.2 Online analysis tools</h3>
            <p>Click on "Analysis" and select one of the three online analysis tools to access the corresponding page.</p>
            
            <img src="@/assets/help/Figure6.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 6.</span>Access to the online analysis tools</p>

            <!-- 3.2.1 TF binding analysis -->
            <div class="third-level-section" id="tf-binding-analysis">
              <h4>3.2.1 TF binding analysis</h4>
              <p><span style="font-weight: bold">TF binding analysis:</span>Users can assess changes in TF binding affinity caused by index SNVs using motif PFMs and colocalizations of SNVs with TFBS by entering either a specific TF or SNV.</p>
              <img src="@/assets/help/Figure7.png" alt="CanASM overview" style="width: 100%; height: auto;">
              <p style="text-align: center"><span style="font-weight: bold">Figure 7.</span>TF binding analysis.</p>
            </div>
            
            <!-- 3.2.2 Target gene prediction by 3D -->
            <div class="third-level-section" id="target-gene-prediction">
              <h4>3.2.2 Target gene prediction by 3D</h4>
              <p><span style="font-weight: bold">Target gene prediction by 3D:</span>By entering either a genomic region or specific SNVs of interest, users can obtain potential target genes using large-scale 3D chromatin interaction data. Upon entering a genomic region or specific SNVs of interest, CanASM first filters them against all index SNVs of ASMs. The retained index SNVs are then analyzed using large-scale 3D chromatin interaction data to predict their potential target genes.</p>
              <img src="@/assets/help/Figure8.png" alt="CanASM overview" style="width: 100%; height: auto;">
              <p style="text-align: center"><span style="font-weight: bold">Figure 8.</span>Target gene prediction by 3D.</p>
            </div>
            
            <!-- 3.2.3 Cell marker variation prediction -->
            <div class="third-level-section" id="cell-marker-prediction">
              <h4>3.2.3 Cell marker variation prediction</h4>
              <p><span style="font-weight: bold">Cell marker variation prediction:</span>Users can input SNVs in batches. CanASM first filters them against all index SNVs of ASMs and then analyzes the target genes of the retained index SNVs. By checking whether these target genes serve as cell markers, users can assess the potential role of the input SNVs in cell identity recognition.</p>
              <img src="@/assets/help/Figure9.png" alt="CanASM overview" style="width: 100%; height: auto;">
              <p style="text-align: center"><span style="font-weight: bold">Figure 9.</span>Cell marker variation prediction.</p>
            </div>
          </div>

          <!-- 3.3 Download -->
          <div class="sub-section" id="download">
            <h3>3.3 Download</h3>
            <p><span style="font-weight: bold">Download:</span> All ASM (i.e., SNV‒CpG pairs) information is categorized by tissue and available for download. Additionally, the maps of index SNVs and various cis-regulatory elements (including super enhancers, typical enhancers, ATAC regions, 3D interaction regions, and CpG islands), the maps of index SNVs and TFBSs, the relationships between index SNVs and motif disruptions, and the links between index SNVs and GWAS cancer associations are all provided for download.</p>
            <img src="@/assets/help/Figure10.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 10.</span>Download page.</p>
          </div>

          <!-- 3.4 Browse -->
          <div class="sub-section" id="browse">
            <h3>3.4 Browse</h3>
            <p><span style="font-weight: bold">Browse:</span>All ASM data, organized by tissue and various cis-elements, are available for browsing in batches.</p>
            <img src="@/assets/help/Figure11.png" alt="CanASM overview" style="width: 100%; height: auto;">
            <p style="text-align: center"><span style="font-weight: bold">Figure 11.</span>Browse page for ASMs.</p>
          </div>
        </div>
      </div>

      <!-- 4. DATABASE FRAMEWORK AND WEB IMPLEMENTATION -->
      <div class="help-section" id="framework">
        <h2>4. DATABASE FRAMEWORK AND WEB IMPLEMENTATION</h2>
        <div class="section-content">
          <p>The CanASM website is developed and maintained on a Linux Apache web server (<a href="https://www.apache.org" target="_blank" class="help-link">https://www.apache.org</a>). The backend of the server uses Spring Boot v3.2.2 (<a href="https://spring.io/projects/spring-boot" target="_blank" class="help-link">https://spring.io/projects/spring-boot</a>) and MyBatis v3.5.14 (<a href="https://mybatis.org/mybatis-3/" target="_blank" class="help-link">https://mybatis.org/mybatis-3/</a>) as the framework and ORM tool respectively, with MySQL v8.0.34 (<a href="https://www.mysql.com/" target="_blank" class="help-link">https://www.mysql.com/</a>) as the database management system. The frontend interface of our website uses Vue 3.4.10 (<a href="https://vuejs.org/" target="_blank" class="help-link">https://vuejs.org/</a>) and Webpack v5.80.0 (<a href="https://webpack.js.org/" target="_blank" class="help-link">https://webpack.js.org/</a>) as the development framework and module bundler, and Axios v1.6.7 (<a href="https://axios-http.com/" target="_blank" class="help-link">https://axios-http.com/</a>) for HTTP requests. The Element-Plus UI v2.4.1 (<a href="https://element-plus.org/" target="_blank" class="help-link">https://element-plus.org/</a>) library is used for implementing advanced components and layout. The current version of the website supports most of the standard web browsers, including Google Chrome, Apple Safari, etc. The frontend is deployed using Nginx v1.25.3 (<a href="https://nginx.org/" target="_blank" class="help-link">https://nginx.org/</a>) and the backend is deployed using Docker v24.0.5 (<a href="https://www.docker.com/" target="_blank" class="help-link">https://www.docker.com/</a>) on the Linux server.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const activeSection = ref('overview')
const helpList = [
  { 
    name: '1.Introduction', 
    id: 'introduction',
    children: []
  },
  { 
    name: '2.Data Process', 
    id: 'data-process',
    children: [
      { name: '2.1 BS-seq data sources', id: 'bs-seq-data' },
      { name: '2.2 ASM identification pipeline', id: 'asm-identification' },
      { name: '2.3 Gene linkage to ASMs', id: 'gene-linkage' }
    ]
  },
  { 
    name: '3.Database Usage', 
    id: 'database-usage',
    children: [
      { name: '3.1 Search', id: 'search' },
      { 
        name: '3.2 Online analysis tools', 
        id: 'online-analysis',
        children: [
          { name: '3.2.1 TF binding analysis', id: 'tf-binding-analysis' },
          { name: '3.2.2 Target gene prediction by 3D', id: 'target-gene-prediction' },
          { name: '3.2.3 Cell marker variation prediction', id: 'cell-marker-prediction' }
        ]
      },
      { name: '3.3 Download', id: 'download' },
      { name: '3.4 Browse', id: 'browse' }
    ]
  },
  { 
    name: '4.Database Framework and Web Implementation', 
    id: 'framework',
    children: []
  }
]

const scrollToSection = (id) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 监听滚动以更新活动章节
const handleScroll = () => {
  const sections = helpList.map(item => document.getElementById(item.id))
  const scrollPosition = window.scrollY + 100

  for (let i = sections.length - 1; i >= 0; i--) {
    if (sections[i] && sections[i].offsetTop <= scrollPosition) {
      activeSection.value = helpList[i].id
      break
    }
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.help-page {
  display: flex;
  min-height: calc(100vh - 60px);
  /* background-color: #f5f7fa; */
  padding: 20px;
  gap: 20px;
}

/* 左侧导航样式 */
.help-sidebar {
  position: sticky;
  top: 20px;
  width: 250px;
  height: fit-content;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sidebar-header {
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #333;
  font-size: 16px;
}

.sidebar-menu li:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

.sidebar-menu li.active {
  background-color: #ecf5ff;
  color: #409EFF;
  font-weight: 500;
}

/* 主内容区样式 */
.help-content {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.help-section {
  margin-bottom: 40px;
}

.help-section:last-child {
  margin-bottom: 0;
}

.help-section h2 {
  font-size: 28px;
  color: #1a1a1a;
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ddd;
}

.help-section h3 {
  font-size: 22px;
  color: #1a1a1a;
  margin: 25px 0 15px;
}

.section-content {
  color: #333;
  line-height: 1.8;
}

.section-content p {
  margin: 16px 0;
  font-size: 18px;
  line-height: 32px;
  text-align: justify;
}

.section-content ul {
  padding-left: 20px;
  margin: 16px 0;
}

.section-content li {
  margin: 10px 0;
  font-size: 18px;
  line-height: 32px;
  text-align: justify;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .help-page {
    flex-direction: column;
    padding: 10px;
  }

  .help-sidebar {
    width: 100%;
    position: static;
    margin-bottom: 20px;
  }

  .help-content {
    padding: 20px;
  }
}

.sub-menu-item {
  padding-left: 40px !important;
  font-size: 13px !important;
  /* background-color: #fafafa; */
}

.sub-menu-item:hover {
  background-color: #f0f2f5;
}

.sub-menu-item.active {
  background-color: #e6f7ff;
}

.sub-section {
  margin: 30px 0;
  padding-left: 20px;
}

.sub-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.sub-section:first-child {
  margin-top: 0;
}

.sub-section:last-child {
  margin-bottom: 0;
}

.first-level {
  font-weight: 500;
  color: #409EFF !important;
  font-weight: bold;
}

/* .first-level::first-letter {
  text-transform: uppercase;
  
} */

.third-level-menu-item {
  padding-left: 60px !important;
  font-size: 12px !important;
  /* background-color: #f8f8f8; */
}

.third-level-menu-item:hover {
  background-color: #f0f0f0;
}

.third-level-menu-item.active {
  background-color: #e0f0ff;
}

.third-level-section {
  margin: 20px 0;
  padding-left: 40px;
}

.third-level-section h4 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.help-link {
  color: #409EFF;
  text-decoration: none;
  transition: color 0.3s;
}

.help-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>
